import logo from './logo.svg';
import './App.css';
import mapboxgl from '@/assets/cdn/mapbox/mapbox-gl.js';
import '@/assets/cdn/mapbox/mapbox-gl.css';  // 引入本地 CSS 文件
import *as React from 'react';
import { useEffect, useRef } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Router from '@/router/index.tsx'; // 确保路径正确
import Home from './pages/home/index.tsx';  // 导入 home 组件
import v2coding from './pages/v2coding/index.tsx';  // 导入 home 组件
const App = () => {
  const mapRef = useRef(null);
  //useEffect 数据获取（API 请求）、订阅（如 WebSocket 或其他事件监听）、手动操作 DOM、 清理操作（如清理订阅或定时器）
  useEffect(() => {
    const script = document.createElement('script');
    // script.src = '@/assets/cdn/mapbox/mapbox-gl.js';
    // script.async = true;
    // document.body.appendChild(script);
    // return () => {
    //   document.body.removeChild(script);
    // };
    // 在脚本加载完成后，你可以进行其他操作
    script.onload = () => {
      //   mapboxgl.accessToken = 'pk.eyJ1IjoiYnVnbWExa2VyIiwiYSI6ImNtOHBka3p1OTBhZ3QyanNhOHV4bHM3MWEifQ.AQXyF5gvVkuUoD18ky52FA'
      //  let map = new mapboxgl.Map({
      //     container: mapRef.current ? mapRef.current : "",
      //     style: "mapbox://styles/bugma1ker/ckw0cyddu431914pa997gphgw",
      //     // style:'mapbox://styles/mapbox/streets-v11',
      //     center: [116.4074, 39.9042],
      //     zoom: 8,
      //   });
      console.log('外部脚本已加载');
      // 可以在这里使用脚本中声明的全局变量
      if (window.MyGlobalVar) {
        console.log('全局变量:', window.MyGlobalVar);
      }
    };
  }, []);
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>

    //   <Router>
    //   <Routes>
    //    <Route  path="/" element={<Home />} />
    //    <Route path="/v2coding" element={<v2coding />} />
    //    /!* 可以继续定义其他路由 *!/
    //   </Routes>
    //   <div
    //    ref={mapRef} // 将 mapRef 绑定到 DOM 元素
    //    // style={{ width: '100%', height: '100vh' }} // 给容器指定大小
    //   >123</div>
    // </Router>


    // <div className="App">
    //   <header className="App-header">
    //     <img src={logo} className="App-logo" alt="logo" />
    //     <p>
    //       Edit <code>src/App.js</code> and save to reload.
    //     </p>
    //     <a
    //       className="App-link"
    //       href="https://reactjs.org"
    //       target="_blank"
    //       rel="noopener noreferrer"
    //     >
    //       Learn React
    //     </a>
    //   </header>
    // </div>

  );
  //  React.FC = () => {
  //   return (
  //     <div>
  //       <Home />
  //     </div>
  //   );
  // };
}


export default App;
